<template>
  <a-modal :open="open" width="850px" title="跟进" centered ok-text="保存" destroy-on-close @ok="onOk" @cancel="onCancel">
    <div class="w-full flex flex-wrap">
      <a-button v-for="item in labelData" :key="item.id" class="ml-2 mt-2" @click="onClickAdd(item)">{{ item.dictItemName }}</a-button>
    </div>
    <div class="flex">
      <div class="w-full form-style-flex">
        <a-form :model="formState" class="form-style-flex">
          <a-form-item label="" class="w-full mt-4">
            <a-textarea v-model:value="formState.description" :rows="5" placeholder="请输入" />
          </a-form-item>
        </a-form>
        <div>跟进记录</div>
        <div class="h-[200px] overflow-y-scroll">
          <a-timeline class="mt-5">
            <a-timeline-item v-for="item in data" :key="item.id">
              <div>
                {{ item.description }}
              </div>
              <div class="text-xs text-[#aeafb1]">{{ item.createTime }} {{ item.createUserName }}</div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const selectedRowData = ref([])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const data = ref([])
const labelData = ref([])
const formState = ref({
  description: ''
})
const onClickAdd = (item) => {
  formState.value.description = (formState.value.description ? formState.value.description + '，' : '') + item.dictItemName
}
const getLabelData = async () => {
  const { code, data } = await post('/operation/opex/getDictCommonItemList', {
    dictCommonCode: 'DT00308',
    status: 1
  })

  if (code === 0) {
    labelData.value = data.map((item) => {
      item.status = 0
      return item
    })
  }
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      getLabelData()
      if (props.rowData) {
        formState.value = { ...props.rowData }
        getData()
      } else {
        formState.value = {}
      }
    }
  }
)

const getData = async () => {
  const res = await post('/outp/mzdj/getOutpCustomerFollowList', formState.value)
  if (res.code !== 0) return
  data.value = res.data
}
const onOk = async () => {
  // return
  formState.value = {
    courseAppointmentDetailList: selectedRowData.value,
    ...formState.value
  }
  const res = await post('/outp/mzdj/saveOutpCustomerFollow', formState.value)
  if (res.code === 0) {
    message.success(res.msg)

    emit('success')
    onCancel()
  } else {
    message.error(res.msg)
  }
}

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped></style>
